<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./city.js"></script>
</head>
<body>
    <select name="" id="sele">
       <option value="">-省份-</option>
    </select>
    <select name="" id="lect">
    <option value="">-市-</option>
</select>
    <select name="" id="area">
        <option value="">-区-</option>
    </select>
</body>
<script>
    $(function(){
       var html=''//1ding
       for(i in citys){
           html+=`<option value="${i}">${citys[i].name}</option>`
       }
       $('#sele').append(html)
       $('#sele').change(function(){
           $('#lect').html('<option value="">-市-</option>')
           var city = citys[$(this).val()].city
           var html=''
           for(i in city){
            html+=`<option value="${i}">${city[i].name}</option>`
           }
           $('#lect').append(html)
           sheng=$(this).val()
       })
       $('#lect').change(function(){
           $('#area').html('<option value="">-区-</option>')
           var area =citys[sheng].city[$(this).val()].area
           var html=''
           for(i in area){
            html+=`<option value="${i}">${area[i]}</option>`
           }
           $('#area').append(html)
       })
    })
    // console.log(prompt('sdfkljhgsdfkvb'))
</script>
</html>